<template>
  <view class="exam-video">
    <view class="exam-content u-flex">
      <u-image
        src="@/pageFound/static/images/video_play_icon.png"
        width="104"
        height="104"
        @click="open"
      ></u-image>
      <view class="title">{{ title }}</view>
    </view>
    <u-popup v-model="show" mode="right" width="100%">
      <view class="exam-video-player">
        <!-- 关闭按钮 -->
        <view class="close" @click="close" :style="{ top: globStatusBarHeight + 'px' }">
          <u-icon name="close" color="#909399" size="34"></u-icon>
        </view>
        <view v-if="loading" class="video-loading">
          <u-loading mode="flower" :size="60" :color="globPrimaryColor" v-if="loading"></u-loading>
        </view>
        <video
          id="examVideoPlayer"
          class="video-wrapper"
          :src="src"
          :controls="controls"
          :enable-progress-gesture="false"
          :show-center-play-btn="false"
          :direction="90"
          @error="error"
          @play="play"
          @pause="pause"
          @timeupdate="timeupdate"
          @loadedmetadata="onLoadComplete"
          v-if="src"
        >
          <slider
            class="video-control-slider"
            :activeColor="globPrimaryColor"
            :value="current"
            :max="duration"
            backgroundColor="rgba(195,197,198,.5)"
            :block-size="16"
            @change="seeked"
            @changing="seeking"
          >
          </slider>
          <view class="video-control-tool">
            <image
              class="video-control-play"
              @click="onPlay"
              src="@/static/images/play.png"
              v-if="paused"
            ></image>
            <image
              class="video-control-play"
              @click="onPlay"
              src="@/static/images/pause.png"
              v-else
            ></image>
            <view class="video-control-current">{{ formatTime(current) }}</view>
            <view class="video-control-number">/</view>
            <view class="video-control-duration">{{ formatTime(duration) }}</view>
          </view>
        </video>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  name: 'exam-video',
  props: {
    src: {
      type: String,
      default: '',
    },
    title: {
      type: String,
      default: '',
    },
    index: {
      type: String,
      default: '',
    },
    id: {
      type: [String, Number],
      default: 0,
    },
  },
  data() {
    return {
      videoContext: null,
      controls: false, // 是否显示默认播放控件
      current: 0, // 当前进度(s)
      duration: 0, // 总时长(s)
      paused: true, // 是否处于暂停状态
      seek: false, // 是否处于拖动状态
      loading: true, //是否处于读取状态
      show: false,
      subNVue: null,
    }
  },
  computed: {
    ...mapState({
      examIndex: (state) => state.examination.examIndex,
      currentPlayerKey: (state) => state.examination.currentPlayerKey,
    }),
    ...mapGetters({
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      globStatusBarHeight: 'projectSetting/globStatusBarHeight',
    }),
  },
  watch: {
    examIndex() {
      if (this.videoContext) {
        this.videoContext.pause()
      }
    },
    currentPlayerKey(newValue, old) {
      if (newValue != this.index && this.videoContext) {
        this.videoContext.pause()
      }
    },
  },
  mounted() {
    this.videoContext = uni.createVideoContext('examVideoPlayer', this)
  },
  methods: {
    // 格式化时间
    formatTime(seconds) {
      let [day, hour, minute, second] = [0, 0, 0, 0]
      day = Math.floor(seconds / (60 * 60 * 24))
      hour = Math.floor(seconds / (60 * 60)) - day * 24
      let showHour = null
      if (this.showDays) {
        showHour = hour
      } else {
        showHour = Math.floor(seconds / (60 * 60))
      }
      minute = Math.floor(seconds / 60) - hour * 60 - day * 24 * 60
      second = Math.floor(seconds) - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60
      // 如果小于10，在前面补上一个"0"
      showHour = showHour < 10 ? '0' + showHour : showHour
      minute = minute < 10 ? '0' + minute : minute
      second = second < 10 ? '0' + second : second
      day = day < 10 ? '0' + day : day
      if (showHour > 0) {
        return showHour + ':' + minute + ':' + second
      }
      return minute + ':' + second
    },
    // 开始/继续播放时
    onPlay() {
      if (this.paused) {
        this.videoContext.play()
      } else {
        this.videoContext.pause()
      }
    },
    // 加载完成时
    onLoadComplete(e) {
      this.duration = e.detail.duration
      setTimeout(() => {
        this.loading = false
      }, 200)
    },
    // 当开始/继续播放时
    play(e) {
      this.paused = false
    },
    // 当暂停播放时
    pause() {
      this.paused = true
    },
    // 播放进度变化时
    timeupdate(e) {
      if (!this.seek) {
        this.current = Math.floor(e.detail.currentTime)
      }
    },
    // 拖动进度条结束
    seeked(e) {
      this.seek = false
      this.videoContext.seek(Math.floor(e.detail.value))
    },
    // 正在拖动进度条
    seeking(e) {
      this.seek = true
      this.current = Math.floor(e.detail.value)
    },
    // 视频播放出错时触发
    error(e) {
      console.log(e)
    },
    // 打开
    open() {
      // #ifdef APP-PLUS
      this.$u.route('/pageFound/exam/appVideoPlayer', {
        src: this.src,
      })
      // #endif
      // #ifndef APP-PLUS
      this.show = true
      // #endif
      this.$store.commit('examination/player', this.index)
    },
    // 关闭弹窗
    close() {
      this.show = false
      this.videoContext.pause()
    },
  },
  destroyed() {
    this.close()
  },
}
</script>

<style lang="scss" scoped>
::v-deep.uni-video-progress-container {
  display: none;
}

.exam-content {
  .title {
    font-size: 28rpx;
    color: #303133;
    margin-left: 24rpx;
  }
}

.exam-video-player {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  background-color: #000000;
  .close {
    position: absolute;
    padding: 15px;
  }
  .video-loading {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 410rpx;
    margin-top: -205rpx;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000000;
  }
  .video-wrapper {
    width: 100%;
    height: 410rpx;
  }

  /deep/.uni-video-slots {
    z-index: 99;
    pointer-events: auto;
  }

  /deep/.video-control-slider {
    margin: 0;
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    z-index: 99;
    .uni-slider-handle {
      z-index: 99;
    }
  }
  .video-control-tool {
    display: flex;
    padding: 9px 15px 0;
    height: 49px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 98;
    background: rgba(75, 75, 75, 0.15);
    box-sizing: border-box;

    .video-control-current {
      font-size: 12px;
      color: #ffffff;
      margin-left: 6px;
      line-height: 32px;
      width: 40px;
      text-align: center;
    }

    .video-control-duration {
      font-size: 12px;
      color: #ffffff;
      line-height: 32px;
      width: 40px;
      text-align: center;
    }

    .video-control-number {
      font-size: 12px;
      color: #ffffff;
      line-height: 32px;
    }

    .video-control-play {
      width: 20px;
      height: 20px;
      margin-top: 6px;
    }
  }
}
</style>
